<template>
	<div>
		<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改' " :close-on-click-modal='false'
			:close-on-press-escape='false' :fullscreen='true' class="el-textarea__inner">

			<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()"
				label-width="120px" :inline="true" class="aui-content--tabs-icon-nav">

				<el-form-item label="入库单号" prop="receiptkey">
					<el-input v-model="dataForm.receiptkey" placeholder="入库单号" disabled> </el-input>
				</el-form-item>
				<el-form-item label="单据类型" prop="type">
					<!-- <el-input v-model="dataForm.type" placeholder="单据类型"></el-input>-->
					<el-select v-model="dataForm.type" placeholder="请选择" :disabled="typeVisible">
						<el-option v-for="item in receiptType" :key="item.list" :label="item.listname"
							:value="item.list">
						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="状态" prop="status">
					<!-- <el-input v-model="dataForm.status" placeholder="状态" readonly></el-input> -->
					<el-select v-model="dataForm.status" placeholder="请选择" disabled>
						<el-option v-for="item in receiptStatus" :key="item.list" :label="item.listname"
							:value="reString(item.list)">
						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="来源单号" prop="sourcekey">
					<el-input v-model="dataForm.sourcekey" placeholder="来源单号" :disabled="allVisible"></el-input>
				</el-form-item>
				<el-form-item label="来源单类型" prop="sourcetype">
					<el-input v-model="dataForm.sourcetype" placeholder="来源单类型" :disabled="allVisible"></el-input>
				</el-form-item>
				<el-form-item label="来源单时间" prop="sourcedate">
					<el-date-picker v-model="dataForm.sourcedate" type="date" placeholder="来源单时间"
						format="YYYY 年 MM 月 DD 日" :disabled="allVisible">
					</el-date-picker>
					<!-- <el-input v-model="dataForm.sourcedate" placeholder="来源单时间" :disabled="allVisible"></el-input> -->
				</el-form-item>
				<el-form-item label="供应商号" prop="companyid">
					<el-input v-model="dataForm.companyid" placeholder="供应商号" :disabled="allVisible"
						@click="outerVisible = true"></el-input>
				</el-form-item>
				<el-form-item label="供应商名称" prop="companyname">
					<el-input v-model="dataForm.companyname" placeholder="供应商名称" :disabled="allVisible"
						@click="outerVisible = true"></el-input>
				</el-form-item>
				<el-form-item label="联系人" prop="customer">
					<el-input v-model="dataForm.customer" placeholder="联系人" :disabled="allVisible"
						@click="outerVisible = true"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input v-model="dataForm.phone" placeholder="电话" :disabled="allVisible"
						@click="outerVisible = true">
					</el-input>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="dataForm.address" placeholder="地址" :disabled="allVisible"
						@click="outerVisible = true"></el-input>
				</el-form-item>
				<el-form-item label="关联单据" prop="relatedorderkey">
					<el-input v-model="dataForm.relatedorderkey" placeholder="关联单据" :disabled="allVisible"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" placeholder="备注" :disabled="allVisible"></el-input>
				</el-form-item>
				<el-form-item label="回传状态" prop="backstatus">
					<el-input v-model="dataForm.backstatus" placeholder="回传状态" disabled></el-input>
				</el-form-item>
				<el-form-item label="回传时间" prop="backdate">
					<el-input v-model="dataForm.backdate" placeholder="回传时间" disabled></el-input>
				</el-form-item>
				<el-form-item label="回传结果" prop="backresult">
					<el-input v-model="dataForm.backresult" placeholder="回传结果" disabled></el-input>
				</el-form-item>
				<el-form-item label="回传码" prop="backcode">
					<el-input v-model="dataForm.backcode" placeholder="回传码" disabled></el-input>
				</el-form-item>
				<el-form-item label="仓库" prop="warehouse">
					<el-input v-model="dataForm.warehouse" placeholder="仓库" disabled></el-input>
				</el-form-item>
				<el-form-item label="更新人" prop="updatuser">
					<el-input v-model="dataForm.updatuser" placeholder="更新人" disabled></el-input>
				</el-form-item>
				<el-form-item label="更新时间" prop="updatetime">
					<el-input v-model="dataForm.updatetime" placeholder="更新时间" disabled></el-input>
				</el-form-item>

			</el-form>
			<template #footer>
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
			</template>
		</el-dialog>
		<el-dialog v-model="outerVisible" title="公司选择">
			<el-form :inline="true" :model="customerDataForm" @keyup.enter.native="getDataList()">
				<el-form-item>
					<el-input v-model="customerDataForm.companyid" size="small" placeholder="来往关系id" clearable>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="customerDataForm.companyname" size="small" placeholder="来往关系名称" clearable>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="getDataList()" type="primary">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="dataListLoading" :data="dataList" border
				@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
				style="width: 100%;">
				<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
				<!--<el-table-column prop="id" label="${column.comments}"  header-align="center"
                             align="center"></el-table-column>-->
				<el-table-column prop="companyid" label="来往关系id" header-align="center" align="center"></el-table-column>
				<el-table-column prop="companyname" label="来往关系名称" header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="customer" label="联系人" header-align="center" align="center"></el-table-column>
				<el-table-column prop="phone" label="电话" header-align="center" align="center"></el-table-column>
				<el-table-column prop="address" label="地址" header-align="center" align="center"></el-table-column>
				<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
					<template #default="scope">
						<el-button type="text" size="small" @click="outerVisible = false">取 消</el-button>
						<el-button type="text" size="small" @click="dataCommit(scope.row.id)">确定</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
				layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
				@current-change="pageCurrentChangeHandle">
			</el-pagination>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		getReceiptById,
		putReceipt,
		postReceipt
	} from "@/network/lswms/receipt/Receipt"
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import {
		getSequenceByType
	} from "@/network/lswms/base/Sequence.js"
	import {
		ElMessage
	} from 'element-plus'
	import _ from 'lodash'
	import DataList from "../../../utils/DataList";
	import {
		getCustomerById
	} from "../../../network/lswms/base/Customer";
	import {
		request
	} from "../../../network/request";


	export default {
		name: "receiptAddOrUpdate",
		emits: ["refreshDataList"],
		setup(props, {
			emit
		}) {
			const {
				mixinViewModuleOptions,
				order,
				orderField,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();
			const customerDataForm = ref({})
			const outerVisible = ref(false)
			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/customer/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/customer';
				mixinViewModuleOptions.value.exportURL = '/lswms/customer/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true
				if (mixinViewModuleOptions.value.activatedIsNeed) {
					getDataList();
				}

			})
			const getDataList = () => {
				dataListLoading.value = false;

				request({
					url: mixinViewModuleOptions.value.getDataListURL,
					method: 'get',
					params: _.merge({
						order: order.value,
						orderField: orderField.value,
						page: mixinViewModuleOptions.value.getDataListIsPage ? page.value : null,
						limit: mixinViewModuleOptions.value.getDataListIsPage ? limit.value : null
					}, customerDataForm.value)

				}).then(function(res) {

					dataListLoading.value = false;
					if (res.code !== 0) {
						dataList.value = [];
						total.value = 0;
						return ElMessage.error(res.msg);
					}
					dataList.value = mixinViewModuleOptions.value.getDataListIsPage ? res.data.list : res.data;
					if (res.data.param) {
						customerDataForm.value = res.data.param;
					}
					total.value = mixinViewModuleOptions.value.getDataListIsPage ? res.data.total : 0;
				}).catch(function() {
					dataListLoading.value = false;
				})
			}
			const allVisible = ref(false)
			const typeVisible = ref(false)

			const visible = ref(false);
			const status = ref(0)
			const dataForm = ref({
				id: '',
				receiptkey: '',
				status: 0,
				type: 'PR',
				sourcekey: '',
				sourcetype: '',
				sourcedate: '',
				supplierkey: '',
				suppliername: '',
				contacts: '',
				phone: '',
				address: '',
				relatedorderkey: '',
				remark: '',
				backstatus: '',
				backdate: '',
				backresult: '',
				backcode: '',
				warehouse: '',
				adduser: '',
				addtime: '',
				updatuser: '',
				updatetime: ''
			});

			const dataCommit = (val) => {
				getCustomerById(val).then((res) => {
					dataForm.value.companyid = res.data.companyid
					dataForm.value.companyname = res.data.companyname
					dataForm.value.customer = res.data.customer
					dataForm.value.phone = res.data.phone
					dataForm.value.address = res.data.address
					outerVisible.value = false

				})


			}


			const dataRule = reactive({
				receiptkey: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				type: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				// companyname: [{
				// 	required: true,
				// 	message: '必填项不能为空',

				// }],
			})

			const dataFormRef = ref(null)

			const init = () => {
				visible.value = true;
				nextTick(function() {
					dataFormRef.value.resetFields();
					receiptStatusFn();
					receiptTypeFn();
					if (dataForm.value.id) {
						getReceiptById(dataForm.value.id).then(function(res) {
							if (res.code !== 0) {
								return ElMessage.error(res.msg);
							}
							dataForm.value = _.assignIn({}, dataForm.value, res.data);
							if (dataForm.value.status != 0) {
								typeVisible.value = true
							} else {
								typeVisible.value = false
							}
							if (dataForm.value.status == 11) {
								allVisible.value = true;
								typeVisible.value = true
							} else {
								allVisible.value = false;
								typeVisible.value = false
							}
						});



					} else {
						receiptkeyFn();
						typeVisible.value = false;
						allVisible.value = false

					}

					/* if(dataForm.value.status!=0){
					    typeVisible.value=true
					} */

				})
			}


			const receiptStatus = ref("");

			const receiptStatusFn = () => {

				getCodeListByCode('receiptstatus').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					receiptStatus.value = res.data;
				}).catch((err) => {});
			}

			const receiptType = ref("");

			const receiptTypeFn = () => {

				getCodeListByCode('ReceiptType').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					receiptType.value = res.data;
				}).catch((err) => {});
			}

			const receiptkeyFn = () => {

				getSequenceByType('receipt').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value.receiptkey = res.data;
				}).catch((err) => {});
			}





			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate(function(valid) {
					if (!valid) {
						return false;
					}

					let qing = () => {
						return !dataForm.value.id ? postReceipt(dataForm.value) : putReceipt(dataForm
							.value)
					}
					qing().then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false
								emit('refreshDataList')
							}
						})
					}).catch(function() {});

				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})

			return {
				typeVisible,
				order,
				orderField,
				visible,
				dataForm,
				dataRule,
				init,
				dataFormSubmitHandle,
				dataFormRef,
				status,
				receiptStatus,
				receiptType,
				allVisible,

				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				outerVisible,
				dataCommit,
				customerDataForm

			}
		},
		methods: {
			//hasPermission
			reString: function(val) {
				let n = Number(val)
				if (!isNaN(n)) {
					return n
				} else {
					return val
				}
			}
		}

	}
</script>

<style scoped>
	.el-textarea__inner {
		font-size: 40vm;
		width: 1100px;
	}

	.el-input__inner {
		width: 230px;
	}
</style>
